import 'bootstrap/dist/css/bootstrap.css';
import '../css/index2.scss';

require('bootstrap/dist/js/bootstrap.js');
require('./common.js');
require('./plugins/layer/layer.js');
require('./echartsFunction/tool.js');
require('./echartsFunction/chartClass.js');
$('#sidebar-menu a[href="choose_list.html"]').addClass('active')
$('#sidebar-menu a[href="choose_list.html"]').parent('li').addClass('active');



import {websiteListUrl, websiteDirectoryUrl} from './urlconfig/config.js';
import {tableInit, resData} from './tableFunction/cmmon.js';

import {getData, chartError, removeChartError} from './chartFunction.js';


var web_name, chart, table;
$('.load').hide();


layer.load();
web_name = tool.getQueryString('web_name');


$(".page-title").html(web_name + '关键词数量统计')
var resDataObj = {
	timeData: [],
	seriesData: {}
};
var chartData = {
	charSet: {
		yAxis: { 
			type: 'value',  
    	},
    	xAxis: {
			type: 'category',				    
		},
		series: [],
	},
	type: 'line',
};

var reqOption = {
	data: {
			time: 30,
        	page_number: 'all',
        	website_name: web_name
		},
	url: websiteListUrl,
	type: 'post'		
};
var dirctData = {
	direct_name: '/',
	website_name: web_name
}



function creat() {
	getData(reqOption).then(function(res){
		
		if(res.hasOwnProperty('items') || res.items.length > 0) {
			removeChartError($("#chart-content"));
			formatResData(res.items);
			chart = new ChartClass($("#chart-content")[0], chartData);
			chart.init();
		}else {
			chartError($("#chart-content"))
		}
		
	}, function() {
		chartError($("#chart-content"))
	})
}
creat();		
// function getData(option, callback, first) {
// 	let url = '' || option.url;
// 	let data = '' || option.data;
// 	console.log(data)
// 	$.ajax({
// 		url: url,
// 		type: option.type || 'post',
// 		dataType: 'json',
// 		data: data,
// 		success: function(res) {
// 			console.log(res);
// 			if(res.status === 1) {
// 				callback(res.data.items)

                
//                 if(!first) {
//                 	chartData.type = chart.type;
//                 	console.log(chart.type)
//                 	chartData.day = chart.day;
//                 	chartData.page = chart.page;
//                 }		
//                 console.log(chartData);
// 				chart = new ChartClass($("#chart-content")[0], chartData);

// 				// if(first){ 
// 					chart.init()
// 					// chart.createCheckbox('.checkbox-wrap');
// 				// }
// 			}else {

// 			}
			
// 		},
// 		error: function() {

// 		}
// 	})
// }
function formatResData(resArr) {
	layer.closeAll('loading');
	resDataObj.seriesData = {};
	resDataObj.timeData = [];
	let length = resArr.length;
	let webName = [];
	let xAxisTime = [];
	
	for(let index = 0; index < length; index++) {
		webName[index] = resArr[index].name;
		let obj = {};
		let i = 0, j = 0;
		let seriesData = [];
		let dataValue = resArr[index].data;
		for(var p in dataValue) {
			xAxisTime[j++] = tool.formatDate(parseInt(p));
			seriesData[i++] = dataValue[p];
			resDataObj.seriesData[resArr[index].name] = seriesData;
		}
		

	}
	resDataObj.timeData = xAxisTime;
	chartData.name = webName;
	chartData.data = resDataObj;
}		


let columns = [
			{
                field: 'key_name',
                title: '关键词'
            },{
                field: 'rank',
                title: '排名',
            },{
                field: 'all_expoment',
                title: '整体指数'
            },{
                field: 'pc_expoment',
                title: 'pc指数',
                
            },{
                field: 'mobile_expoment',
                title: '移动指数',
            },{
            	field: 'name360_expoment',
            	title: '360指数',
            	
            }
		];
let baseConfig = {
	list: {
		url: websiteDirectoryUrl,
		type: 'post',
		data: dirctData
	},
	table: {
		id: '#datatable-editable',
		columns: columns	
	},	
	//分页默认是bootstrap																	
	page: false, //是否需要分页
};
table = new tableInit(baseConfig);


let createDirct = () => {
	var timer;
	$(".left_direct li").remove();
	timer = setInterval(function() {
		if(typeof resData != 'undefined') {
			clearInterval(timer);
			let directory = resData.directory;
			directory.forEach(v => {
				let span = '<span class="pull-right">(' + v.count +'个词)</span>';
				let li = $('<li class="mulv"></li>');
				if(dirctData.direct_name === v.name) {
						li.addClass('active')
				}
				if(v.name !== '/') {
					v.newname = '/' + v.name
				}else {
					v.newname = v.name
				}
				li.attr('name', v.name).html(v.newname + span).appendTo($('.left_direct'))
			})
		}else {

		}
	},1)
}
$(".left_direct").on('click', '.mulv', function() {
	let li = $(this);
	$(this).addClass('active').siblings('li').removeClass('active');
	dirctData.direct_name = $(this).attr('name');
	$('.load').show();
	$.ajax({
		url: websiteDirectoryUrl,
		type: 'post',
		dataType:"json",
		data: dirctData,
		success: function(res) {
			if(res.status === 1) {
				$('.load').hide();
				table.$table.bootstrapTable('load', res.data.items); 
			}else {

			}
		},
		error: function() {

		}
	})
	// table.$table.bootstrapTable('destroy');
	// getDirct();
	// console.log(li);
})
// getData(reqOption, formatResData, true);



createDirct();

// 时间选择
function setTime(dagnumber, ele) {
	reqOption.data.time = dagnumber;
	let ele_siblins = tool.sibling(ele);
	for(let index = 0, length = ele_siblins.length; index < length; index++) {
		tool.removeClass(ele_siblins[index], 'btn-default');
	}
	tool.addClass(ele, 'btn-default');
	chartData.day = dagnumber;
	creat()
	
}

// 页数选择
function setPage(page, ele) {
	reqOption.data.page_number = page;
	let ele_siblins = tool.sibling(ele);
	for(let index = 0, length = ele_siblins.length; index < length; index++) {
		tool.removeClass(ele_siblins[index], 'btn-default');
	}
	tool.addClass(ele, 'btn-default');
	chartData.page = page;
	creat();
}


window.setTime = setTime;
window.setPage = setPage;



//设置选择的select


// import './test/magnific-popup.css';

// import 'bootstrap/dist/css/bootstrap.css';

// import '../css/index2.scss';

// require('bootstrap/dist/js/bootstrap.js');
// require('./dataTables/bootstrap-table.min.js');
// require('./test/jquery.magnific-popup.min.js');



// require('./jquery.cookie.js');
// var token
// (function (){
//     if($.cookie('userdata') == null){
//         if(typeof(login)=="undefined"){
//             window.location.href='login.html';
//         }
//     }else{
//         let userInfo = JSON.parse($.cookie('userdata'));
//         token = userInfo.userdata.token;
//     }
//     $("#dropdown-menu").click(function(){
//         window.location.href="login.html";
//         $.cookie('userdata', null)
//     })
// })();



// require('./common.js');
// import {tagTypeListUrl, tagTypeDelUrl} from './urlconfig/config.js';
// import {tableInit, TableAction} from './test/cmmon.js';
// let reqData = {
// 	token: token,
// 	pages: {
// 		page: 1,
// 		page_number: 10
// 	},
// 	params: {
// 		title: ''
// 	}
// };


// let baseConfig = {
// 	list: {
// 		url: tagTypeListUrl,
// 		type: 'POST',
// 		data: reqData
// 	},
// 	table: {
// 		id: '#datatable-editable',
// 		checkbox: true,
// 		toolbar: '#toolbar',
// 		columns: [
// 			{
//                 field: 'id',
//                 title: '编号',
                
//             },{
//                 field: 'title',
//                 title: '当前分类名称'
//             },{
//                 field: 'title_2',
//                 title: '所属二级分类名称'
//             },{
//                 field: 'title_1',
//                 title: '所属一级分类名称'
//             },{
//             	field: 'operate',
//             	title: '操作',
//             }
// 		],
// 		actions: ['del', 'edit'],
		
// 	},
// 	//分页默认是bootstrap
// 	page: true, //是否需要分页
// 	pageOption: {
// 		id: '#datatable-paginate', 
// 		visiblePages: 10 //页面展示的分页的按钮数量
// 	},
// 	del_action: {
// 		url: tagTypeDelUrl,
// 		type: 'post',
// 		post_key: 'id',
// 		data: {
// 			token: token,
			
// 		} 
// 	}
// 	// url: sourceListUrl,
// 	// type: 'POST',
// 	// data: {
// 	// 	token: '4770f4eafb339e69b8c6b9dfea8743cd'
// 	// }
// };
// $.extend(window, {
//     statusFormatter: function(value, row) {
//     	if(parseInt(value) === 1) {
// 			return '正常';
// 		}else {
// 			return '不正常';
// 		}
//     },
//  //    operateEvents: {
// 	//     'click .remove-row': function (e, value, row, index) {
// 	//     	m.rowDelete(row);
// 	//         // alert('editor, row: ' + JSON.stringify(row));
// 	//     },
// 	//     'click .edit-row': function (e, value, row, index) {

// 	//         // table.rowDelete('../data/bootstrap-table-delect.json',row.id,"确定要删除这一行？",true)
// 	//     }
// 	// }
// });


// var m = new tableInit(baseConfig)

// $("#btn_delete").on('click', function(e) {
// 	e.preventDefault();

	
// 	m.delChecked()
// })
// // window.operateEvents = {
// //     'click .remove-row': function (e, value, row, index) {
// //     	m.rowDelete()
// //         alert('editor, row: ' + JSON.stringify(row));
// //     },
// //     'click .edit-row': function (e, value, row, index) {

// //         // table.rowDelete('../data/bootstrap-table-delect.json',row.id,"确定要删除这一行？",true)
// //     }
// // }
// // 自己的格式化数据函数




// // var statusFormatter = function(value, row) {
// // 	if(parseInt(value) === 1) {
// // 		return '正常';
// // 	}else {
// // 		return '不正常';
// // 	}
// // };

// // window.statusFormatter = statusFormatter;




// // init(option).then(function(res) {
// // 	//获取列表成功之后的回调
// // 	// console.log(res)
// // 	var oTable = new TableInit();
// // 	    oTable.Init(res);

// // }).catch((err) => console.log('rejected', err));


// // function randomData() {
// //         var startId = ~~(Math.random() * 100),
// //             rows = [];

// //         for (var i = 0; i < 10; i++) {
// //             rows.push({
// //                 id: startId + i,
// //                 name: 'test' + (startId + i),
// //                 price: '$' + (startId + i)
// //             });
// //         }
// //         return rows;
// //     }
// // var TableInit  = function() {
// // 		var oTableInit = new Object();
		
// // 		oTableInit.Init = function() {
// // 			// console.log(data)
// // 			$('#datatable-editable').bootstrapTable({

// // 				ajax : function (request) {  
// // 			        $.ajax({  
// // 			            type: 'POST',
// // 			            url: sourceListUrl,   
// // 			            dataType:"json",  
// // 			            data: {
// // 			            	token: '4770f4eafb339e69b8c6b9dfea8743cd'
// // 			            },   
// // 			            success : function (msg) {
// // 			            	$(".fixed-table-loading").hide()
// // 			            	console.log(msg)	
// // 			                // request.success({  
// // 			                //     row : msg  
// // 			                // }); 
// // 			                console.log(msg.data.items) 
// // 			                $('#datatable-editable').bootstrapTable('load', randomData());  
// // 			            },  
// // 			            error:function(){  
// // 			                alert("错误");  
// // 			            }  
// // 			        });  
// // 			    },

// // 				toolbar: '#toolbar',
// // 				columns: [{
// //                 checkbox: true
// //             }, {
// //                 field: 'id',
// //                 title: '编号'
// //             }, {
// //                 field: 'name',
// //                 title: '数据源名称'
// //             }, {
// //                 field: 'price',
// //                 title: '数据供应方'
// //             }, {
// // 			  field: 'operate',
// // 			  title: '操作',
// // 			  formatter: operateFormatter
// // 			}

// //             ],
// //             undefinedText: '暂无',
// //             clickToSelect: false,

// //             // pagination:true,//是否分页 
// //             // onPageChange: function(number, size) {

// //             // }
// //       //       pageNumber: 1, //初始化加载第一页，默认第一页
    		
// //     		// pageSize:10,//单页记录数
// //     		// sidePagination: "server",
// //             // pagination: true,
// //             // pageSize: 5,
// //             // search: true
// // 			}).on('load-success.bs.table', function(e, data) {
// // 				console.log(data)
// // 			}).on('pre-body.bs.table', function(data) {
// // 				console.log(data)
// // 			}).on('check-all.bs.table', function(rows) {
// // 				console.log(rows)
// // 			})
// // 		}
// // 		return oTableInit;
// // 	}

// // var oTable = new TableInit();
// // 	    oTable.Init();

// // function queryParams(params) {
// // 	 return {
// //         //pageSize : params.limit, //每一页的数据行数，默认是上面设置的10(pageSize)
// //         //pageIndex : params.offset/params.limit+1, //当前页面,默认是上面设置的1(pageNumber)
// //         data : {
// //         	token: '4770f4eafb339e69b8c6b9dfea8743cd'
// //         } //这里是其他的参数，根据自己的需求定义，可以是多个
// //     }
// // }
// // //请求成功方法
// // function responseHandler(result){
// // 	console.log(result)
// //     var errcode = result.errcode;//在此做了错误代码的判断
// //     if(errcode != 0){
// //         alert("错误代码" + errcode);
// //         return;
// //     }
// //     //如果没有错误则返回数据，渲染表格
// //     return {
// //         total : result.dataLength, //总页数,前面的key必须为"total"
// //         data : result.rowDatas //行数据，前面的key要与之前设置的dataField的值一致.
// //     };
// // };	
// // function dateFormatter(value, row) {
// // 	return (new Date(parseInt(value) * 1000).format("yyyy-MM-dd"))
// // 	// console.log(typeof value)
// // 	// console.log(row)
// // 	// var icon = row.id % 2 === 0 ? 'fa-star' : 'fa-user';
// // 	// return '<span class="text-muted"> ' + value + '</span>';
// // }
// // function statusFormatter(value, row) {
// // 	if(parseInt(value) === 1) {
// // 		return '正常';
// // 	}else {
// // 		return '不正常';
// // 	}
// // }
// // function operateFormatter() {
// // 	return [
// //    '<input type="button" value="删除" class="remove-row btn btn-primary btn-sm"   style="display:inline">',
// //    ].join('');
// // }
// // /*格式化时间戳*/
// // Date.prototype.format = function(format) {
// //     /*
// //      * eg:format="YYYY-MM-dd hh:mm:ss";
// //      */
// //     var o = {
// //         "M+" :this.getMonth() + 1, // month
// //         "d+" :this.getDate(), // day
// //         "h+" :this.getHours(), // hour
// //         "m+" :this.getMinutes(), // minute
// //         "s+" :this.getSeconds(), // second
// //         "q+" :Math.floor((this.getMonth() + 3) / 3), // quarter
// //         "S" :this.getMilliseconds()
// //     // millisecond
// //     }
// //     if (/(y+)/.test(format)) {
// //         format = format.replace(RegExp.$1, (this.getFullYear() + "")
// //                 .substr(4 - RegExp.$1.length));
// //     }

// //     for ( var k in o) {
// //         if (new RegExp("(" + k + ")").test(format)) {
// //             format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k]
// //                     : ("00" + o[k]).substr(("" + o[k]).length));
// //         }
// //     }
// //     return format;
// // }



// $(function() {

// 	// TableAction.initialize({
// 	// 	table: '#datatable-editable', //
// 	// 	delbtn: '.remove-row', //删除按钮默认的class
// 	// 	deldialog: {
// 	// 		wrapper: '#dialog',
// 	// 		cancelButton: '#dialogConfirm',
// 	// 		confirmButton: '#dialogCancel'
// 	// 	},
// 	// 	editorbtn: '.edit-row'
// 	// })

// 	// $("#two").on('click', function() {
// 	// 	$.ajax({  
//  //            type: 'POST',
//  //            url: sourceListUrl,   
//  //            dataType:"json",  
//  //            data: {
//  //            	token: '4770f4eafb339e69b8c6b9dfea8743cd'
//  //            },   
//  //            success : function (msg) {
//  //            	$(".fixed-table-loading").hide()
//  //            	console.log(msg)	
//  //                // request.success({  
//  //                //     row : msg  
//  //                // }); 
//  //                console.log(msg.data.items) 
//  //                $('#datatable-editable').bootstrapTable('load', randomData());  
//  //            },  
//  //            error:function(){  
//  //                alert("错误");  
//  //            }  
//  //        });  
// 	// })	
// })